<template>
	<ul>
		<li v-for='show in show'>
			<router-link :to='{name:"details",params:{id:show.id}}'>
				<div class="left">
					<img :src="show.poster.thumbnail" alt="" />
				</div>
				<div class="right">
					<h5>{{show.name}}<span>{{show.grade}}</span></h5>
					<p>{{show.intro}}</p>
					<p><span>{{show.cinemaCount}}</span>家影院上映<span>{{show.watchCount}}</span>人购票</p>
				</div>
			</router-link>
		</li>
	</ul>
</template>
<script>
	export default {
		data:function(){
			return {
				show:''
			}
		},
		mounted:function(){
			var that = this;
			this.$store.commit('alter','正在热映')
              $.get('http://10.20.159.13:3000/zhengzai',function(res) {
            	that.show = res.data.films;
            })
		}
	}
</script>
<style scoped>
	li {
		width: 3.45rem;height: 1.25rem;box-sizing:border-box;
		border-bottom:dashed 1px rgb(201, 201, 201);padding:.2rem 0;
	}
	li a {
		display:block;display:flex;
	}
	li a .left {
		width: .6rem;height: .825rem;
		background:red;
	}
	li a .left img {
		width: 100%;height: 100%; 
	}
	li a .right {
		padding:0 .15rem;
	}
	li a .right h5 {
		font-size:.16rem;color:#000;height: .32rem;line-height:.32rem;
		font-weight:0;position:relative;width: 2.09rem;
	}
	li a .right h5 span {
		position:absolute;top:0;right:-.3rem;
	}
	li a .right p:nth-child(2){
		height: .24rem;color:rgb(142, 142, 142);
		font-size:.12rem;line-height:.24rem;
	}
	li a .right p:nth-child(3){
		height: .24rem;color:rgb(142, 142, 142);
		font-size:.12rem;line-height:.24rem;
	}
	li a .right p:nth-child(3) span{
		color:rgb(138, 162, 191);
	} 
	li a .right p:nth-child(3) span:nth-child(2){
		margin-left:.5rem;
	}
</style>